<template>
    <uv-popup ref="popup" mode="bottom" zIndex="980" bgColor="none" :safeAreaInsetBottom="false"
        @maskClick="closePopup(0)" :custom-style="{ 'height': '100%' }" style=“touch-action:none”>

        <view class="detail-container" v-if="type == 'detail'">
            <view class="hedader">
                <view class="back" @click="closePopup(0)">
                    <view class="back-icon">
                        <uv-icon name="arrow-left" size="12" color="#fff"></uv-icon>
                    </view>
                    <div class="back-view">返回重新选择</div>
                </view>
                <view class="back-icon" @click="closePopup(0)">
                    <uv-icon name="close" size="12" color="#fff"></uv-icon>
                </view>
            </view>
            <view class="content">
                <swiper class="swiper" circular autoplay interval="5000" :current="index" @change="intervalChange">
                    <swiper-item class="swiper-item" v-for="item in detail.imageList" :key="item.id">
                        <view class="swiper-item">
                            <uv-image class="swiper-item-img" :src="item.url" mode="aspectFill" width="100%"
                                height="100%" @click="checkModel"></uv-image>
                        </view>
                    </swiper-item>
                </swiper>
                <view class="dots">
                    <view class="dots-item" :class="{ actived: index == i }" v-for="(item, i) in detail.imageList"
                        :key="item.id"></view>
                </view>
            </view>
            <view class="footer">
                <!-- <view class="work-btn-style btn">点击创作同款</view> -->
                <view class="work-btn-style btn" @click="closePopup(1)">
                    点击创作同款
                </view>
            </view>
        </view>

        <view class="video-container" v-if="type == 'video'">
            <view class="video-content">
                <video class="video"
                    src="https://video-xue.banjiajia.com/sv/5dde412b-18ecac8cfa9/5dde412b-18ecac8cfa9.mp4" controls
                    style="width: 100%"></video>
            </view>
            <uv-icon class="close-video" @click="closePopup(0)" name="close" color="#fff" size="32"></uv-icon>
        </view>

        <view class="list-container" v-if="type == 'list'">

            <view class="tab">
                <view class="tab-container">
                    <view class="item" :class="{ 'actived': tabIndex == i }" v-for="(item, i) in tabs" @click="tabIndex = i"
                        :key="i">
                        {{ item.name }}
                    </view>
                </view>
                <view class="close" @click="closePopup(0)"><uv-icon name="close-circle-fill" color="#999"
                        size="24"></uv-icon></view>
            </view>

            <ColumnList @acceptColumn="changeColumn" v-if="tabIndex == 0 || tabIndex == 4" />
            <uv-gap height="24rpx" bgColor="#191919" v-else></uv-gap>

            <view class="list-content" style="justify-content: center;" v-if="modelList.length == 0">
                <uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
            </view>
            <view v-else class="list-content" ref="listContainer" @scroll="listModelScroll">
                <view class="list-item" :class="{ actived: modelIndex == i }" v-for="(item, i) in modelList" :key="item"
                    @click="selectedModel(item, i)">
                    <image class="item-img" :src="item.cover" mode="aspectFill"></image>
                </view>
                <uv-load-more v-if="modelList" bgColor="#191919" marginTop='0' marginBottom='0' height="40"
                    :status="hasMore ? 'loading' : 'noMore'" />
            </view>

            <!-- 控制器 -->
            <view class="controller">
                <view @click="closePopup(1)" class="work-btn-style draw"
                    :class="{ disabled: Object.keys(currentModel).length == 0 }">点击创作</view>
                <view @click="changeCheck" class="work-btn-style check"
                    :class="{ disabled: Object.keys(currentModel).length == 0 }">查看</view>
            </view>

            <view class="detail-container" v-if="checkOnOff">
                <view class="hedader">
                    <view class="back" @click="changeCheck">
                        <view class="back-icon">
                            <uv-icon name="arrow-left" size="12" color="#fff"></uv-icon>
                        </view>
                        <div class="back-view">返回重新选择</div>
                    </view>
                    <view class="back-icon" @click="changeCheck">
                        <uv-icon name="close" size="12" color="#fff"></uv-icon>
                    </view>
                </view>
                <view class="content">
                    <swiper class="swiper" circular autoplay interval="5000" :current="modePreviewIndex"
                        @change="changeModelPreviewIndex">
                        <swiper-item class="swiper-item" v-for="item in currentModel.imageList" :key="item.id">
                            <view class="swiper-item">
                                <uv-image class="swiper-item-img" :src="item.url" mode="aspectFill" width="100%"
                                    height="100%" @click="checkModel"></uv-image>
                            </view>
                        </swiper-item>
                    </swiper>
                    <view class="dots">
                        <view class="dots-item" :class="{ actived: modePreviewIndex == i }"
                            v-for="(item, i) in currentModel.imageList" :key="item.id"></view>
                    </view>
                </view>
                <view class="footer">
                    <view class="work-btn-style btn" @click="closePopup(1)">
                        点击创作同款
                    </view>
                </view>
            </view>


        </view>

    </uv-popup>
</template>

<script setup>
import {
    getCurrentInstance,
    watch,
    ref
} from 'vue';
import {
    onHide,
    onShow
} from '@dcloudio/uni-app'
import {
    previewModel
} from "@/utils/utils.js";
import {
    apiGetModelList, //获取指定类别的模型列表
    apiGetRecentModelList, //获取最近使用的模型
    apiGetCollectModelList, //获取收藏的模型列表
    apiGetExclusiveModelList, //获取定制的模型列表
    apiGetSpecialModelList, //获取限定专区的模型列表
} from '@/api/defaultApi.js'
// pinia
import {
    useModelStore
} from "@/stores/useModelStores.js"

// 获取pinia的数据
const modelStore = useModelStore()

const {
    proxy
} = getCurrentInstance()
const props = defineProps({
    //开关
    onOff: {
        type: Boolean,
        default: false
    },
    // 类型
    type: {
        type: String,
        default: 'detail'
    },
    // 详情对象(前提是type为detail)
    detail: {
        type: Object,
        default: () => ({})
    },
})
const emit = defineEmits(['accept'])

// detail - 下标
const index = ref(0)

// list - 模型列表相关

const tabs = ref([{
    name: '风格库'
},
{
    name: '最近使用'
},
{
    name: '我的收藏'
},
{
    name: '模型定制'
},
{
    name: '限定专区'
}
])
const tabIndex = ref(0)

const categoryId = ref('') // 类别id
const modelList = ref([])
const pageNo = ref(1)
const pageSize = ref(10)

// 是否还有更多
const hasMore = ref(true)
// 是否触底
const isAtBottom = ref(false)
// 选择的模型
const currentModel = ref({})
const modelIndex = ref(-1)

//查看列表预览开关
const checkOnOff = ref(false)
// 列表预览序列
const modePreviewIndex = ref(0)



watch(
    () => props.onOff,
    (newValue, oldValue) => {
        if (!newValue) return
        openPopup()

        index.value = 0
        categoryId.value = ''
        modelList.value = []
        pageNo.value = 1
        pageSize.value = 10
        hasMore.value = true
        isAtBottom.value = false
        currentModel.value = {}
        modelIndex.value = -1
        tabIndex.value = 0
    }
)

watch(tabIndex, (newValue, oldValue) => {
    modelList.value = []
    pageNo.value = 1
    pageSize.value = 10
    hasMore.value = true
    isAtBottom.value = false
    currentModel.value = {}
    modelIndex.value = -1

    getModelListData()

})
/* detail */

// 记录index
const intervalChange = (e) => {
    index.value = e.detail.current
}

// 打开模型弹窗
const openPopup = () => {
    proxy.$refs.popup.open('bottom');
}

// 预览模型
const checkModel = () => {
    let arr = []
    for (let i = 0; i < props.detail.imageList.length; i++) {
        arr.push(props.detail.imageList[i].url)
    }

    previewModel(arr, index.value)
}

// 关闭模型弹窗
const closePopup = (n) => {

    if (n) {
        checkOnOff.value = false
        goDraw()
    } else {
        emit('accept')
        proxy.$refs.popup.close();
    }
}

// 创作同款
const goDraw = () => {
    let data = {}
    if (Object.keys(currentModel.value).length > 0) {
        data = currentModel.value
    } else {
        data = props.detail
    }
    modelStore.setModel(data)
    emit('accept')
    proxy.$refs.popup.close();
    uni.switchTab({
        url: "/pages/draw/draw"
    })
}


/* list */

// 切换tab
const changeTab = (item) => {
    tabIndex.value = item.index
}
// 选择模型分类
const changeColumn = (data) => {
    modelList.value = []
    pageNo.value = 1
    hasMore.value = true

    currentModel.value = {}
    modelIndex.value = -1

    categoryId.value = data.id

    getModelList()
}

// 获取模型列表
const getModelList = async () => {
    let res = await apiGetModelList({
        pageNo: pageNo.value,
        pageSize: pageSize.value
    }, categoryId.value)

    modelList.value = modelList.value.concat(res.data.items)
    pageNo.value = res.data.page

    if (res.data.items.length < pageSize.value) hasMore.value = false

    setTimeout(() => {
        uni.stopPullDownRefresh()
    }, 300)

}

// 获取最近使用模型列表
const getRecentModelList = async () => {
    let res = await apiGetRecentModelList({
        pageNo: pageNo.value,
        pageSize: pageSize.value
    })

    modelList.value = modelList.value.concat(res.data.items)
    pageNo.value = res.data.page

    if (res.data.items.length < pageSize.value) hasMore.value = false

    setTimeout(() => {
        uni.stopPullDownRefresh()
    }, 300)

}

// 获取收藏的模型列表
const getCollectModelList = async () => {
    let res = await apiGetCollectModelList({
        pageNo: pageNo.value,
        pageSize: pageSize.value
    })

    modelList.value = modelList.value.concat(res.data.items)
    pageNo.value = res.data.page

    if (res.data.items.length < pageSize.value) hasMore.value = false

    setTimeout(() => {
        uni.stopPullDownRefresh()
    }, 300)

}

// 获取定制的模型列表
const getExclusiveModelList = async () => {
    let res = await apiGetExclusiveModelList({
        pageNo: pageNo.value,
        pageSize: pageSize.value
    })

    modelList.value = modelList.value.concat(res.data.items)
    pageNo.value = res.data.page

    if (res.data.items.length < pageSize.value) hasMore.value = false

    setTimeout(() => {
        uni.stopPullDownRefresh()
    }, 300)

}

// 获取限定专区的模型列表
const getSpecialModelList = async  () => {
    let res = await apiGetSpecialModelList({
        pageNo: pageNo.value,
        pageSize: pageSize.value
    }, categoryId.value)
    
    modelList.value = modelList.value.concat(res.data.items)
    pageNo.value = res.data.page

    if (res.data.items.length < pageSize.value) hasMore.value = false

    setTimeout(() => {
        uni.stopPullDownRefresh()
    }, 300)
}

//根据tab获取模型列表
const getModelListData = () => {
    modelList.value = []
    switch (tabIndex.value) {
        case 0:
            getModelList()
            break;
        case 1:
            getRecentModelList()
            break;
        case 2:
            getCollectModelList()
            break;
        case 3:
            getExclusiveModelList()
            break;
        case 3:
            getExclusiveModelList()
            break;
        case 4:
            getSpecialModelList()
            break;
    }
}

//模型列表触底翻页
const listModelScroll = (e) => {
    isAtBottom.value = e.instance.$el.scrollHeight - e.instance.$el.scrollTop <= e.instance.$el.clientHeight + 1

    if (isAtBottom.value) {
        pageNo.value++
        getModelListData()
    }
}

// 选择模型
const selectedModel = (item, i) => {
    currentModel.value = item
    modelIndex.value = i
}

// 查看开关
const changeCheck = () => {
    if (Object.keys(currentModel.value).length == 0) return

    if (checkOnOff.value) {
        checkOnOff.value = false
    } else {
        checkOnOff.value = true
    }
}

//记录modelIndex
const changeModelPreviewIndex = (e) => {
    modePreviewIndex.value = e.detail.current
}
</script>

<style lang="scss" scoped>
.detail-container {
    width: 100%;
    bottom: 0;
    background: #191919;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    padding: 16rpx 16rpx 0;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    .hedader {
        height: 40rpx;
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 32rpx;

        .back {
            display: flex;

            .back-view {
                font-size: 22rpx;
                color: #fff;
                font-weight: 500;
                margin-left: 16rpx;
                line-height: 40rpx;
            }
        }

        .back-icon {
            width: 40rpx;
            height: 40rpx;
            background: #333333;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .content {
        width: 686rpx;
        margin: 0 auto;

        .swiper {
            width: 100%;
            height: 686rpx;
            border-radius: 20rpx;
            overflow: hidden;
            background: #191919;

            .swiper-item {
                height: 100%;

                .swiper-item-img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .dots {
            width: 100%;
            height: 66rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            .dots-item {
                width: 8rpx;
                height: 8rpx;
                background-color: #999;
                margin: 0 4rpx;
                border-radius: 4rpx;

                &.actived {
                    width: 24rpx;
                    background-color: #fff;
                }
            }
        }
    }

    .footer {
        width: 686rpx;
        margin: 20rpx auto calc(var(--window-bottom) + 20rpx);

        .btn {
            width: 100%;
            height: 78rpx;
            color: #080808;
            font-size: 30rpx;
            font-weight: 700;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}

.video-container {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;

    .video-content {
        width: 90%;
        height: auto;
    }

    .close-video {
        position: absolute;
        top: 24vh;
        right: 10vw;
    }
}

.list-container {
    width: 100vw;
    background: #191919;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    margin-bottom: var(--window-bottom);
    overflow: hidden;

    .tab {
        width: 100%;
        height: 68rpx;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        padding: 0 32rpx;
        border: 2rpx solid #333;

        .tab-container {
            display: flex;
            flex-direction: row;
            padding-top: 32rpx;
            height: 100%;
            flex: 1;
            display: flex;
            justify-content: space-between;
            padding-right: 10rpx;

            .item {
                font-size: 22rpx;
                height: 22rpx;
                line-height: 22rpx;
                color: #ffff;
                position: relative;

                &:nth-last-child(1) {
                    margin-right: 0;
                }

                &::after {
                    content: '';
                    width: 64rpx;
                    height: 4rpx;
                    position: absolute;
                    bottom: -12rpx;
                    background: #ffcb30;
                    left: 0;
                    right: 0;
                    margin: auto;
                    display: none;
                }

                &.actived {
                    &::after {
                        display: block;
                    }
                }
            }
        }

        .close {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-top: 4rpx;
        }
    }

    &::v-deep() {
        .Column {
            background: #191919;
            margin-bottom: 0;
        }
    }

    .list-content {
        padding: 0 32rpx;
        height: 564rpx;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        overflow-y: scroll;



        .list-item {
            width: 335rpx;
            height: 335rpx;
            background: #999;
            margin-bottom: 16rpx;
            border-radius: 20rpx;
            overflow: hidden;
            border: 4rpx solid #191919;

            &.actived {
                border: 4rpx solid #ffcb30;
            }

            .item-img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .controller {
        height: 118rpx;
        width: 100%;
        background: #191919;
        padding: 0 32rpx;
        box-sizing: border-box;
        z-index: 9;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .draw {
            width: 468rpx;
            height: 78rpx;
            border-radius: 25rpx;
            font-size: 30rpx;

            &.disabled {
                background: #333333;
                color: #666666;
            }
        }

        .check {
            width: 202rpx;
            height: 78rpx;
            border-radius: 25rpx;
            font-size: 30rpx;

            &.disabled {
                background: #333333;
                color: #666666;
            }
        }
    }

    .detail-container {
        position: fixed;
        bottom: 0;
    }
}
</style>